<template>
  <div class="personal">
    <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <div id="J_chartBarBox" style="min-height: 500px">
              <p class="part-title" style="margin-top: 5px;">实验基本信息</p>
              <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px" >
                <el-col :span="11">
                  <el-form-item label="实验名称" prop="experimentName" style="width: 400px;">
                    <el-input v-model="dataForm.experimentName" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="教师账号" prop="account" style="width: 400px;":readonly="false">
                    <el-input v-model="account" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="实验简介" prop="experimentDesc" style="width: 400px;">
                    <el-input type="textarea"  v-model="dataForm.experimentDesc" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="所属对象" prop="belong" style="width: 400px;">
                    <el-input v-model="dataForm.belong" placeholder="2017级软件专业1704班"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="可选人数" prop="allNumber" style="width: 400px;">
                    <el-input v-model="dataForm.allNumber" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="实验平台" prop="experimentPlatform" style="width: 400px;">
                    <el-input v-model="dataForm.experimentPlatform" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="实验要求" prop="experimentDemand" style="width: 600px;">
                    <el-input type="textarea" v-model="dataForm.experimentDemand" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="报告要求" prop="workFile" style="width: 600px;">
                    <el-input type="textarea" v-model="dataForm.workFile" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="实验资料" prop="experimentData" style="width: 400px;">
                    <el-upload
                      class="upload-demo"
                      :on-success="handleAvatarSuccess"
                      :action="saveImg()"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :file-list="fileList">
                      <el-button size="small" type="primary">点击上传资料</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="开设时间">
                  <el-date-picker v-model="dataForm.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" prop="time"
                   range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                  </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <div style="height: 50px; display: block;"></div>
        <el-col :span="24">
          <el-card>
            <div id="J_chartLineBox" style="min-height: 450px">
              <p class="part-title" style="margin-top: 5px;">实验相关算法介绍</p>
                <UEditor :config=config ref="ueditor" style="z-index: 99;"></UEditor>
             <span slot="footer" class="dialog-footer" style="margin-top:20px ;display: block;">
                <el-col :span="3" :offset="3">
                <el-button type="primary" @click="dataFormSave()" style="margin-left: 200px;">发布</el-button>
                </el-col>
                <el-col :span="3":offset="6">
                <el-button @click="dataCancel('dataForm')">重置</el-button>
                </el-col>
              </span>
            </div>
          </el-card>
        </el-col>
     </el-row>
 </div>
</template>

<script>
  /* eslint-disable */
import UEditor from '../../compont/ueditor/ueditor.vue'
export default{
  components: {UEditor},
  data () {
    return {
      config: {
          //可以在此处定义工具栏的内容
          toolbars: [[
              'fullscreen', 'source', '|', 'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
              'directionalityltr', 'directionalityrtl', 'indent', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
              'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
              , 'insertimage', 'emotion', 'insertvideo', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
              'horizontal', 'date', 'time', 'spechars', 'wordimage', '|',
              'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
              , 'preview', 'searchreplace', 'help'
          ]],
          autoHeightEnabled: false,
          autoFloatEnabled: true,
          initialContent:'',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
          autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
          initialFrameWidth: null,
          initialFrameHeight: 450,
          BaseUrl: '',
          UEDITOR_HOME_URL: 'static/ueditor/'
        },
      addFormVisible: false,
      dataForm: {
        experimentName: '',
        experimentDesc: '',
        account: '',
        belong: '',
        allNumber: '',
        experimentData:'',
        experimentDemand: '',
        workFile: '',
        fun: '',
        experimentPlatform: '',
        time: '',
      },
      dataRule: {
        experimentName: [
          { required: true, message: '实验名称不能为空', trigger: 'blur' }
        ],
        belong: [
          { required: true, message: '所属对象不能为空', trigger: 'blur' }
        ],
        allNumber: [
          { required: true, message: '可选人数不能为空', trigger: 'blur' }
        ]
      },
      startTime: '',
      endTime: '',
      ue: null,
      ueId: `J_ueditorBox_${new Date().getTime()}`,
      dialogVisible: false,
      fileList: [],
      files:[]
    }
  },
  created() {

  },
  computed: {
    id: {
      get () { return this.$store.state.user.id },
      set (val) { this.$store.commit('user/updateId', val) }
    },
    account: {
      get () { return this.$store.state.user.account },
      set (val) { this.$store.commit('user/updateAccount', val) }
    },
    avatar: {
      get () { return this.$store.state.user.avatar },
      set (val) { this.$store.commit('user/updateAvatar', val) }
    }
  },
  mounted () {
  },
  methods: {
    //获取文档内容
      getContent: function(){
        let content = this.$refs.ueditor.getUEContent();
        console.log(content);
        this.dataForm.fun = content;
      },
      handleAvatarSuccess(response) {
        if (response.success) {
          this.files.push(response.data)
        }else{
          this.$message.error(response.message)
        }
      },
      // 保存图片
      saveImg(){
        return this.$http.adornUrl('/file/image');
      },
      handleRemove(file, fileList) {
        fileList.push(file);
      },
      handlePreview(file) {
        fileList.remove(file)
      },
      dataCancel(dataForm) {
        this.$refs[dataForm].resetFields()
      },
      // 表单提交
      dataFormSave () {
        let content = this.$refs.ueditor.getUEContent();
        this.dataForm.experimentData = this.files[0]
        this.dataForm.fun = content;
        this.startTime = this.dataForm.time[0]
        this.endTime = this.dataForm.time[1]
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/course/addExperimentInfo'),
              method: 'post',
              data: this.$http.adornData({
                'experimentName': this.dataForm.experimentName,
                'experimentDesc': this.dataForm.experimentDesc,
                'account': this.account,
                'belong': this.dataForm.belong,
                'allNumber': this.dataForm.allNumber,
                'experimentData': this.dataForm.experimentData,
                'experimentDemand': this.dataForm.experimentDemand,
                'workFile': this.dataForm.workFile,
                'fun': this.dataForm.fun,
                'experimentPlatform': this.dataForm.experimentPlatform,
                'startTime': this.startTime,
                'endTime': this.endTime,
                'createBy': this.account
              })
            }).then(({data}) => {
              if (data.success) {
                this.$message({
                  message: '实验发布成功!',
                  type: 'success'
               });
               this.files = [],
               this.$router.push("/course-experiment")
              } else {
                this.$message.error(data.message)
              }
            })
          }
        })
      }
  }
}
</script>

<style scoped>
  .personal {
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
  .info {
    background-color: #c0d1e9;
    height: 50px;
    font-size: 16px;
    margin-bottom: 20px;
    color: #fff;
    line-height: 50px;
    padding-left: 10px;
  }
  #edui1{
     z-index: 99 !important;
  }
  .part-title {
      margin: 20px 0;
      color: #000;
      padding-left: 1em;
      font-size: 16px;
      position: relative;
      display: inline-block;
      width: 100%;
  }
  .part-title:before{
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 1em;
    background-color: #4976e8;
  }
 .el-button--primary {
      color: #fff;
      background-color: #273471 !important;
      border-color: #273471 !important;
  }
</style>
